<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
%>
<style>
<!--
.showpic {
background-color:gray;
width:400px;
height:300px;
z-index:9999;
}
.hidepic{
display:none;
}
-->
</style>
<script type="text/javascript">
<!--
function showPic(data){
	var id = $(data).attr("rel");
	var urlpath= '<%=path%>/product/find/'+id+'.do';
	//var pic = $(identifer);
	//pic.removeClass("hidepic");
	//pic.addClass("showpic");
	$.pdialog.open(urlpath, "productdetail", "产品详情",{width:400,height:600,mask:true});
}
function hidePic(data){
	
	$(data).removeClass("showpic");
	$(data).addClass("hidepic");
}
</script>
<form id="pagerForm" method="post" action="<%=path%>/product/findAll.do"> 
	<input type="hidden" name="pageNum" value="1" /> 
	<input type="hidden" name="numPerPage" value="${pager.numPerPage}" />
</form>
<div class="pageHeader">
	<form onsubmit="return navTabSearch(this);" action="demo_page1.html"
		method="post">
		<div class="searchBar">
			<table class="searchContent">
				<tr>
					<td>名称：<input type="text" name="keyword" /></td>
				</tr>
			</table>
			<div class="subBar">
				<ul>
					<li><div class="buttonActive">
							<div class="buttonContent">
								<button type="submit">检索</button>
							</div>
						</div></li>
				</ul>
			</div>
		</div>
	</form>
</div>
<div class="pageContent">
	<div class="panelBar">
		<ul class="toolBar">
			<li><a class="add" href="<c:url value="/product/add.do"/>" target="navTab"><span>添加产品</span></a></li>
			<li><a class="delete"
				href="<%=path %>/product/delete/{productId}.do" target="ajaxTodo"
				title="确定要删除吗?"><span>删除</span></a></li>
			<li><a class="edit" href="<%=path %>/product/edit/{productId}.do"
				target="navTab"><span>修改</span></a></li>
			<li class="line">line</li>
		</ul>
	</div>
	<table class="table" width="100%" layoutH="138">
		<thead>
			<tr>
				<th width="80" align="center">序号</th>
				<th width="120" align="center">名称</th>
				<th width="120" align="center">长度</th>
				<th width="100" align="center">宽度</th>
				<th width="150" align="center">高度</th>
				<th width="80" align="center">颜色</th>
				<th width="80"> 备注</th>
			
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${products}" var="product" varStatus="status">
			<tr target="productId" rel="${product.id}" ondblclick="showPic(this);">
				<td>${product.id}</td>
				<td>${product.name}</td>
				<td>${product.length}</td>
				<td>${product.width}</td>
				<td>${product.height}</td>
				<td>${product.color.description }</td>
				<td>${product.remark}</td>
						</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="panelBar">
		<div class="pages">
			<span>显示</span> <select class="combox" name="numPerPage"
				onchange="navTabPageBreak({numPerPage:this.value})">
				<option value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
				<option value="200">200</option>
			</select> <span>条，共${pager.totalCount}条</span>
		</div>

		<div class="pagination" targetType="navTab" totalCount="${pager.totalCount}" numPerPage="${pager.numPerPage}" pageNumShown="10" currentPage="${pager.currentPage}"></div>

	</div>

</div>